<template>
  <el-dialog :model-value="visible" :title="title" width="1000px" :fullscreen="mobile" @close="handleCancel">
    <el-form :model="postForm" ref="postFormRef" label-width="80">
      <el-form-item label="岗位名称" prop="name" :rules="[{ required: true, message: '请输入岗位名称', trigger: 'blur' }]">
        <el-input v-model="postForm.name" style="width: 240px;" clearable></el-input>
      </el-form-item>
      <el-form-item label="岗位权限">
        <el-table :data="list" max-height="550px" ref="multipleTableRef" :row-class-name="selectClassName" @selection-change="handleSelectionChange" stripe>
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column label="功能模块" prop="authName" width="200"></el-table-column>
          <el-table-column label="权限" prop="description"></el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleOk">确定</el-button>
    </template>
  </el-dialog>
</template>
<script setup name="PostOperationDl">
import useAppStore from '@/store/modules/app'
import useUserStore from '@/store/modules/user'
import postApi from '@/api/room/post'
import authApi from '@/api/room/auth'
import { nextTick, onMounted } from 'vue'

const { proxy } = getCurrentInstance()

const userStore = useUserStore()

const emit = defineEmits()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  type: String,
  title: String,
  form: {
    type: Object,
    default: () => {}
  }
})
const list = ref([])
const multipleSelection = ref([])
const data = reactive({
  postForm: {
    name: null
  }
})
const { postForm } = toRefs(data)

const mobile = computed(() => useAppStore().device === 'mobile')
watch(() => props.visible, value => {
  if (value) {
    nextTick(() => {
      proxy.resetForm('postFormRef')
      multipleSelection.value = []
      proxy.$refs['multipleTableRef'].clearSelection()
      if (props.type === 'edit') {
        postForm.value = { ...props.form }
        getRightList(postForm.value.postId)
      }
    })
  }
})

/* 选中行样式 */
function selectClassName({ row }) {
  // console.log(row);
  let index = multipleSelection.value.findIndex(item => item.authId === row.authId)
  if (index > -1) return 'select-row'
  return ''
}
function handleSelectionChange(rows) {
  multipleSelection.value = rows
}

function handleCancel() {
  emit('cancel')
}
function handleOk() {
  proxy.$refs['postFormRef'].validate(valid => {
    if (valid) {
      let params = {
        name: postForm.value.name,
        authIds: multipleSelection.value.map(item => item.authId).join(','),
        apartmentId: userStore.apartment ? userStore.apartment.apartmentId : null
      }
      if (props.type === 'edit') params.postId = postForm.value.postId
      emit('ok', props.type, params)
    }
  })
}

/* 获取员工已有权限 */
function getRightList(id) {
  postApi.getInfo(id).then(res => {
    let ids = res.data.authIds.split(',')
    list.value.forEach(item => {
      if (ids.includes(String(item.authId))) {
        proxy.$refs['multipleTableRef'].toggleRowSelection(item, undefined)
      }
    })
  })
}

/* 获取权限列表 */
function getAuthList() {
  authApi.getList().then(res => {
    list.value = res.rows
  })
  authApi.getAuth(1).then(res => {
    console.log('权限', res)
  })
}

getAuthList()

</script>
<style lang="scss" scoped>
// :deep(.el-table) {
//   .select-row {
//     background-color: var(--el-color-primary-light-9);
//   }
// }
</style>
